<!DOCTYPE html>
<html> 
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
		<title>CHART</title>
		<style type="text/css">
		* {font-size: 14px;}
		.tw-chart-body{width: 100%;height: 100%;overflow: hidden;}
		body {margin: 0;padding:0;background: #fff;}
		</style>
		<script type="text/javascript">
		var chart_option_json = '{"tooltip":{"trigger":"axis","axisPointer":{"type":"shadow"}},"legend":{"top":"5%","data":["整体超期"]},"xAxis":{"type":"category","data":["管理员","顾霞","周微微"],"axisTick":{"alignWithLabel":true}},"yAxis":{"type":"value"},"series":[{"name":"整体超期","type":"bar","data":[7,0,1]}]}';
		var chart_x=[{"data":["管理员","顾霞","周微微"],"data_type":"number","title":"用户名","fieldName":"USERNAME","modelId":2,"viewName":"SHOW_ENDWARM_STATISTICS","$$hashKey":"object:11"}];
		var chart_y=[{"data":[7,0,1],"data_type":"number","title":"整体超期","fieldName":"ZTCQ","modelId":2,"viewName":"SHOW_ENDWARM_STATISTICS","$$hashKey":"object:9"}];var chart_type='bar';
		var modelId = 2;
		</script>
		<script src="chart_asset/js/chart.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		var baseUrl = "http://61.155.85.77:8999";
		function getJSONData(url, data, callback) {
			$.ajax({
				type: "get",
				async: true,
				data: data,
				url: url, //这里是网址
				success: function(json) {
					callback(json)
				},
				timeout: 30000,
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					console.error(url, textStatus + ": " + errorThrown);
				}
			});
		}
		function getResult(viewName,fieldName,callback){
			var url = baseUrl+"/getResult?modelId="+modelId+"&viewName="+viewName+"&fieldName="+fieldName+"&fieldNameCn="+fieldName;
			getJSONData(url, {}, function(data){
				if(data.success){
					//console.log(data);
					var fieldName = "";
					var fieldArr = [];
					var fieldType = "";
					$.each(data.data,function(j,f){
						fieldName = f.fieldName;
						fieldType = f.fieldType?f.fieldType:"string";
						fieldArr.push(f.value);
					})
					var bk = fieldArr;
					if(typeof callback == "function"){
						callback(bk);
					}
				}
			})
		}
		</script>
	</head>
	<body class="tw-chart-body">
		<div id="chart"></div>
		<script type="text/javascript">
			$(function(){
				var pageSize = getPageSize();
				var temp_option = {temp:[]};
				$('#chart').css({
					width:pageSize[2]+'px',
					height:pageSize[3]+'px'
				})
				var $scope = {data:{
			 		fieldDate: '',
			 		chart_x: [],
			 		chart_y: [],
			 		chartType: [],
			 		xData: [],
			 		mychart: '',
			 		pieseries: [],
			 		lineseries: [],
			 		barseries: [],
			 		legendData: [],
			 		searchData: [],
			 		searchList: []
			 	}};
				$scope.class = {
					chart_type: chart_type,
					show_edit: false
				};
			 	$scope.initEcharts = function(){
					$scope.data.mychart = echarts.init(document.getElementById("chart"),'macarons');
					if($scope.class.chart_type == 'line'){
						option = {
							tooltip: {
						        trigger: 'axis',
						        axisPointer :{
						        	type:"shadow"
						        }
						    },
							legend: {
								top: '5%',
						        data: $scope.data.legendData
						    },
						    xAxis: {
						        type: 'category',
						        boundaryGap: false,
						        data: $scope.data.xData
						    },
						    yAxis: {
						        type: 'value'
						    },
						    series:$scope.data.lineseries
						};
						temp_option.temp = [option];
						$scope.data.mychart.setOption(option);		
					}else if($scope.class.chart_type == 'bar'){
						option = {
							tooltip: {
						        trigger: 'axis',
						        axisPointer :{
						        	type:"shadow"
						        }
						    },
							legend: {
								top: '5%',
						        data: $scope.data.legendData
						    },
						    xAxis: {
						        type: 'category',
						        data: $scope.data.xData,
						        axisTick: {
					                alignWithLabel: true
					            }
						    },
						    yAxis: {
						        type: 'value'
						    },
						    series:$scope.data.barseries
						};
						temp_option.temp = [option];
						$scope.data.mychart.setOption(option);
					}else if($scope.class.chart_type == 'pie'){
						option = {
						    legend: {
						        orient: 'vertical',
						        itemWidth: 5,
						        itemHeight: 5,
						        x: 'right',
						        align: 'left',
						        data: $scope.data.xData
						    },
						    series: $scope.data.pieseries
						};
						temp_option.temp = [option];
						$scope.data.mychart.setOption(option);
					}
				}
			 	
			 	//重新取值
				$.each(chart_x, function(ii,e) {
					getResult(e.viewName,e.fieldName,function(bk){
						chart_x[ii].data = bk;
						$.each(chart_y, function(jj,f) {
							getResult(f.viewName,f.fieldName,function(bk2){
								chart_y[jj].data = bk2;
								$scope.data.chart_x = chart_x;
								$scope.data.chart_y = chart_y;
								if($scope.data.chart_x[0]){
									$scope.data.xData = $scope.data.chart_x[0].data;
								}
								if($scope.data.lineseries){
									$scope.data.lineseries = [];
								}
								if($scope.data.barseries){
									$scope.data.barseries = [];
								}
								if($scope.data.pieseries){
									$scope.data.pieseries = [];
								}
								for (var i = 0; i < $scope.data.chart_y.length; i++) {
									$scope.data.legendData.push($scope.data.chart_y[i].title);
									$scope.data.lineseries.push({
										name: $scope.data.chart_y[i].title,
							            type: 'line',
							            data: $scope.data.chart_y[i].data
									});
									
									$scope.data.barseries.push({
										name: $scope.data.chart_y[i].title,
							            type: 'bar',
							            data: $scope.data.chart_y[i].data
									});
									
									var userName = [], userValue = [] ,pieData = [];
										userName = $scope.data.chart_x[0].data;
										userValue = $scope.data.chart_y[i].data;
									for(var j = 0; j< userName.length; j++){
										pieData.push({
											value: userValue[j],
											name: userName[j]
										});
									}
									$scope.data.pieseries.push({
										name: $scope.data.chart_y[i].title,
							            type: 'pie',
							            radius: ['50%', '70%'],
							            label: {
							                normal: {
							                    show: false,
							                    position: 'center'
							                },
							                emphasis: {
							                    show: true,
							                    textStyle: {
							                        fontSize: '30',
							                        fontWeight: 'bold'
							                    }
							                }
							            },
							            data: pieData
									});
									
								}
								
								if($scope.data.chart_x != '' && $scope.data.chart_y != ''){
									$scope.initEcharts();
								}
							})
						});
					})
				});
			})
		</script>
	</body>
</html>